<template>
  <view>
    <view class="slot-box">
      <view>账户余额：<span style="font-weight: bold;margin-left:5rpx;">{{ balance }}</span>
        <span style="margin-left:5rpx">元</span>
      </view>
      <button size="mini" class="green_btn" style="width: 185rpx;" @click="recharge">余额充值</button>
    </view>
<!--    <view class="slot-box">-->
<!--      <view>碳能量：<span style="font-weight: bold;">{{ integral }}</span>-->
<!--        <span style="margin-left:5rpx">g</span></view>-->
<!--      <button size="mini" class="green_btn" style="width: 185rpx;" @click="handleToWithdrawal">碳能量提现</button>-->
<!--    </view>-->
    <view class="slot-box">
      <view>合同签署量：<span style="font-weight: bold;">{{ signNum }}</span>
        <span style="margin-left:5rpx">次</span></view>
      <button size="mini" class="green_btn" style="width: 185rpx;" @click="product">立即购买</button>
    </view>
    <view class="menu-list" style="margin: 0;">
      <!-- 产品购买 -->
      <view class="list-cell list-cell-arrow" @click="product">
        <view class="menu-item-box">
          <view class="iconfont" style="color: skyblue;">&#xe640;</view>
          <view class="u_title">产品购买</view>
        </view>
      </view>
      <!-- 签署套餐 -->
      <view class="list-cell list-cell-arrow" @click="recordList">
        <view class="menu-item-box">
          <view class="iconfont" style="color: blue;">&#xebd8;</view>
          <view class="u_title">签署套餐</view>
        </view>
      </view>
      <!-- 个人订单 -->
      <view class="list-cell list-cell-arrow" @click="order">
        <view class="menu-item-box">
          <view class="iconfont" style="color: #00a660;">&#xe62f;</view>
          <view class="u_title">个人订单</view>
        </view>
      </view>
      <!-- 余额明细 -->
      <view class="list-cell list-cell-arrow" @click="personBalance">
        <view class="menu-item-box">
          <view class="iconfont" style="color: #ffaaff;">&#xe65c;</view>
          <view class="u_title">余额明细</view>
        </view>
      </view>
      <!-- 签署明细 -->
      <view class="list-cell list-cell-arrow" @click="signFlowFeeRecord">
        <view class="menu-item-box">
          <view class="iconfont" style="color:orange;font-size: 24rpx;">&#xe664;</view>
          <view class="u_title">签署明细</view>
        </view>
      </view>
      <!-- 碳能量明细 -->
      <view class="list-cell list-cell-arrow" @click="integralRecord">
        <view class="menu-item-box">
          <view class="iconfont" style="color:olivedrab;">&#xeb8f;</view>
          <view class="u_title">碳能量明细</view>
        </view>
      </view>
      <!-- 余额充值记录 -->
      <view class="list-cell list-cell-arrow" @click="balancePay">
        <view class="menu-item-box">
          <view class="iconfont" style="color:lightskyblue;">&#xe621;</view>
          <view class="u_title">余额充值记录</view>
        </view>
      </view>
      <!-- 碳能量提现记录 -->
      <view class="list-cell list-cell-arrow" @click="withdrawal">
        <view class="menu-item-box">
          <view class="iconfont" style="color:palevioletred;font-size: 28rpx;">&#xe9b4;</view>
          <view class="u_title">碳能量提现记录</view>
        </view>
      </view>
      <!-- 已开具发票记录 -->
      <view class="list-cell list-cell-arrow" @click="invoice">
        <view class="menu-item-box">
          <view class="iconfont" style="color:#8ed369;">&#xea47;</view>
          <view class="u_title">已开具发票记录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {findUserInfo} from "@/api/ec/person/user/userInfo";

export default {
  data() {
    return {
      userInfo: '',
      // 账户余额
      balance: 0,
      // 碳能量数量
      integral: 0,
      // 签署量
      signNum: 0,
    }
  },
  onLoad() {
    this.findUserInfo();
    // 返回该页面的刷新数据
    uni.$on('refreshData', () => {
      this.findUserInfo();
    })
  },
  methods: {
    /** 查询信息 */
    findUserInfo() {
      this.$modal.loading();
      findUserInfo().then(response => {
        uni.hideLoading()
        this.userInfo = response.data;
        this.balance = this.userInfo.staff.balance;
        this.integral = this.userInfo.staff.integral;
        this.signNum = this.userInfo.remainingNum;
      }).catch(() => {
        uni.hideLoading()
      });
    },
    /** 余额充值-个人-费用中心 pages/mine/personal/product/costCenter*/
    recharge() {
      this.$goPay();
    },
    /** 立即购买 */
    product() {
      this.$tab.navigateTo('/pages/mine/personal/product/index')
    },
    /** 已开具发票记录 */
    invoice() {
      this.$tab.navigateTo('./invoicesManage/index')
    },
    /** 签署套餐 */
    recordList() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/index')
    },
    /** 个人订单 */
    order() {
      this.$tab.navigateTo('/pages/mine/personal/product/order/order')
    },
    /** 余额明细 */
    personBalance() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/balance/personBalance')
    },
    /** 签署明细 */
    signFlowFeeRecord() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/signFlowFeeRecord/signFlowFeeRecord')
    },
    /** 碳能量明细 */
    integralRecord() {
      this.$tab.navigateTo('/pages/mine/signFlowFeeOrder/integralRecord/integralRecord')
    },
    /** 碳能量提现记录 */
    withdrawal() {
      this.$tab.navigateTo('./withdrawalRecord/index')
    },
    /** 余额退款记录 */
    balancePay() {
      this.$tab.navigateTo('./balancePay/index')
    },
  }
}
</script>

<style scoped lang="scss">
.menu-item-box {
  .iconfont {
    font-size: 26rpx;
  }

  .u_title {
    margin-left: 10rpx;
  }
}

.slot-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15rpx 20rpx;
  border-bottom: 1rpx solid #eeeeee;
}

page {
  background: $uni-bg-color;
}
</style>
